<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title th:text="${res.name} + '_资源共享平台'"></title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
</head>
<body onload="resizeImage()">
<div th:include="common/header" class="header-wrapper"></div>
<div class="container-wrapper">
    <div class="left">
        <div class="data-list">
            <div class="data-list-title">
                <i class="layui-icon layui-icon-app"></i>
                <span class="head">资源信息</span>
            </div>
            <div class="res">
                <div class="title" th:text="${res.name}"></div>
                <div class="info">
                    <a href="" target="_blank" th:text="${res.user.username}"></a>&nbsp;&nbsp;
                    分享于&nbsp;&nbsp;<label th:text="${#dates.format(res.publishDate,'yyyy-MM-dd')}"></label>&nbsp;&nbsp;
                    查看次数：&nbsp;<label th:text="${res.view+' 次'}"></label>&nbsp;&nbsp;
                    所需：<label style="color: red;" th:text="${res.points}"></label>&nbsp;积分
                </div>
                <div align="center">
                    <div class="bshare-custom">
                        <a title="分享到QQ空间" class="bshare-qzone"></a>
                        <a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
                        <a title="分享到人人网" class="bshare-renren"></a>
                        <a title="分享到腾讯微博" class="bshare-qqmb"></a>
                        <a title="分享到网易微博" class="bshare-neteasemb"></a>
                        <a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
                        <span class="BSHARE_COUNT bshare-share-count">0</span>
                    </div>
                    <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
                    <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
                </div>
                <div class="download-btn">
                    <button class="layui-btn layui-btn-radius" onclick="download()">&nbsp;&nbsp;立即下载&nbsp;&nbsp;</button>
                    <button class="layui-btn layui-btn-radius" onclick="vipDownload()" style="background-color: red">&nbsp;&nbsp;VIP免积分下载&nbsp;&nbsp;</button>
                </div>
                <div id="content" class="content" th:utext="${res.content}"></div>
            </div>
        </div>
        <div class="data-list" style="margin-top: 10px;">
            <div class="data-list-title">
                <i class="layui-icon layui-icon-dialogue"></i>
                <span class="head">评论信息</span>&nbsp;&nbsp;<label style="color: #999;" th:text="'共'+${commentCount}+'条'"></label>
            </div>
            <div class="comment">
                <textarea id="commentContent" placeholder="请输入评论信息" class="layui-textarea"></textarea>
                <button class="layui-btn layui-btn-sm layui-btn-radius" onclick="submitData()">&nbsp;&nbsp;提交评论&nbsp;&nbsp;</button>
            </div>

            <div id="commentList" class="comment-list"></div>
            <div id="commentPage" class="commentPage"></div>
        </div>
        <div class="data-list" style="margin-top: 10px;">
            <div class="data-list-title">
                <i class="layui-icon layui-icon-component"></i>
                <span class="head">相关资源</span>
            </div>
            <div class="data-content" style="height: 250px;">
                <ul id="relatedResources" class="related-resources"></ul>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="data-list">
            <div class="data-list-title">
                <i class="layui-icon layui-icon-fire"></i>
                <span class="head">热门资源</span>
            </div>
            <div class="data-content">
                <ul>
                    <li th:each="hotRes:${hotResList}">
                        <a target="_blank" th:href="'/res/detail/'+${hotRes.id}" th:title="${hotRes.name}"
                           th:text="${#strings.length(hotRes.name)>20} ? ${#strings.substring(hotRes.name,0,21)} : ${hotRes.name}"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div th:include="common/link" class="wrapper"></div>
<div th:include="common/footer" class="footer-wrapper"></div>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    let $, layer;
    layui.use(['layer', 'element', 'laypage'], function () {
        $ = layui.jquery,
            layer = layui.layer;
        let laypage = layui.laypage;

        // 增加查看次数
        $.post("/res/updateView", {"id": [[${res.id}]]}, function (result) {
        });

        let typeId = [[${session.typeId}]];
        $("#" + typeId).css("color", "red");

        //调用分页
        laypage.render({
            elem: 'commentPage',
            limit: 6,
            count: [[${commentCount}]],
            jump: function (obj) {
                $("#commentList").empty();
                $.post("/comment/list", {"res.id": [[${res.id}]], "page": obj.curr}, function (result) {
                    let rows = result;
                    if (rows.length == 0) {
                        $("#commentList").html("<p align='center'>暂无评论</p>");
                    }
                    for (let i = 0; i < rows.length; i++) {
                        let row = rows[i];
                        $("#commentList").append("<div class='comment-item'>" +
                            "   <div class='comment-left'>" +
                            "       <img src='/avatars/" + row.user.avatar + "' class='layui-nav-img'/>" +
                            "   </div>" +
                            "   <div class='comment-right'>" +
                            "       <dt class='comment-name'>" + row.user.username + "<span class='comment-time'>" + row.createDate + "</span>" + "</dt>" +
                            "       <dd class='comment-content'>" + row.content + "</dd>" +
                            "   </div>" +
                            "</div>");
                    }
                }, "json");
            }
        });

        // 加载相关资源
        $.post("/res/loadRelatedResources", {"q": [[${res.name}]]}, function (result) {
            let rows = result;
            for (let i = 0; i < rows.length; i++) {
                let row = rows[i];
                let subName;
                if (row.name.length > 30) {
                    subName = row.name.substring(0, 30);
                } else {
                    subName = row.name;
                }
                $("#relatedResources").append("<li><a target='_blank' href='/res/detail/" + row.id + "' title='" + row.name + "'>" + subName + "</a></li>");
            }
        }, "json");
    });

    // 下载资源
    function download() {
        // 判断是否登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("登录后才能下载资源！");
            return;
        }

        // 查询用户是否下载过该资源
        $.post("/download/isDownload", {"id": [[${res.id}]]}, function (result) {
            if (result) { // 用户下载过该资源
                layer.confirm('该资源您已经下载过，再下载不需要扣除积分，您确定要下载这个资源吗？', {
                    title: "下载提示",
                    btn: ['确定', '取消']
                }, function () {
                    layer.closeAll('dialog');
                    layer.open({
                        type: 2,
                        title: '资源下载页面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['550px', '450'],
                        content: '/download/toDownLoadPage/[[${res.id}]]'
                    });
                }, function () {

                });
            } else { // 用户未下载过该资源
                // 查询用户积分是否足够
                $.post("/user/isPointEnough", {"points": [[${res.points}]]}, function (result) {
                    if (result) { // 积分足够
                        layer.confirm('该资源下载需要 <font color="red">[[${res.points}]]</font> 积分，您确定要下载这个资源吗？', {
                            title: "下载提示",
                            btn: ['确定', '取消']
                        }, function () {
                            layer.closeAll('dialog');
                            layer.open({
                                type: 2,
                                title: '资源下载页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['550px', '450'],
                                content: '/download/toDownLoadPage/[[${res.id}]]'
                            });

                        }, function () {

                        });
                    } else { // 积分不够
                        layer.msg("您的积分不够，不能下载该资源！");
                        return;
                    }
                }, "json");
            }
        }, "json");
    }

    // VIP下载资源
    function vipDownload() {
        // 判断是否登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("登录后才能下载资源！");
            return;
        }

        // 查询用户是否是VIP
        $.post("/user/isVip", {}, function (result) {
            if (result) {
                // 查询用户是否下载过该资源
                $.post("/download/isDownload", {"id": [[${res.id}]]}, function (result) {
                    if (result) { // 用户下载过该资源
                        layer.confirm('该资源您已经下载过，您确定要下载这个资源吗？', {
                            title: "下载提示",
                            btn: ['确定', '取消']
                        }, function () {
                            layer.closeAll('dialog');
                            layer.open({
                                type: 2,
                                title: '资源下载页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['550px', '450'],
                                content: '/download/toVipDownLoadPage/[[${res.id}]]'
                            });
                        }, function () {

                        });
                    } else {  // 用户未下载过该资源
                        layer.confirm('您确定要下载这个资源吗？', {
                            title: "下载提示",
                            btn: ['确定', '取消']
                        }, function () {
                            layer.closeAll('dialog');
                            layer.open({
                                type: 2,
                                title: '资源下载页面',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['550px', '450'],
                                content: '/download/toVipDownLoadPage/[[${res.id}]]'
                            });
                        }, function () {

                        });
                    }
                }, "json");
            } else {
                layer.msg("您不是VIP用户，不能用此通道！");
            }
        }, "json");
    }

    // 提交评论
    function submitData() {
        // 判断是否登录
        if ([[${session.currentUser}]] == null) {
            layer.msg("登录后才能评论！");
            return;
        }

        // 查询用户是否下载过该资源，只有下载过资源才能评论
        $.post("/download/isDownload", {"id": [[${res.id}]]}, function (result) {
            if (result) { // 下载过
                var content = $("#commentContent").val();
                if (content == "") {
                    layer.msg("请输入评论信息！");
                    return;
                }
                $.post("/comment/save", {"res.id": [[${res.id}]], "content": content}, function (result) {
                    if (result.success) {
                        $("#commentContent").val("");
                        layer.msg("评论成功，稍后显示！");
                    }
                }, "json");
            } else {  // 未下载过
                layer.msg("下载该资源后才能评论！");
            }
        }, "json");
    }
    /*]]>*/
</script>
</body>
</html>